<!--
  @Descripttion: 招聘专区
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="recruitment">
    <HeaderCom />
    <div class="bannerBox">
      <img class="pc_img" src="../../assets/images/hire/banner.png" />
      <img class="t_img" src="../../assets/images/hire/banner-2@2x.png" />
    </div>
    <div class="boxs" :class="item.type ? 'box_blue' : ''" v-for="(item, index) in boxList" :key="index">
      <div class="boxMain">
        <div class="title">{{ item.title }}</div>
        <div class="itemBox">
          <!-- <div class="row" v-loading="loadingList[index]" > -->
          <div class="row">
            <item1 :dataList="companyHotList" ref="item1" v-if="index == 0" />
            <item2 :dataList="jobHotList" ref="item2" v-if="index == 1" />
            <item3 :dataList="companyList" ref="item3" v-if="index == 2" />
            <item4 :dataList="jobList" ref="item4" v-if="index == 3" />
          </div>
          <div class="stepBox">
            <div class="steps left" @click="slidePrev(index)">
              <img src="../../assets/images/hire/left1.png" v-if="!item.type" />
              <img src="../../assets/images/hire/left2.png" v-else />
            </div>
            <div class="steps right" @click="slideNext(index)">
              <img src="../../assets/images/hire/right1.png" v-if="!item.type" />
              <img src="../../assets/images/hire/right2.png" v-else />
            </div>
          </div>
        </div>
      </div>
      <div class="btns" @click="toMore((index + 1) % 2 == 0)">查看更多</div>
    </div>
    <FooterMenu />
  </div>
</template>

<script>
import HeaderCom from "@/components/header/index.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import item1 from "./components/item1.vue";
import item2 from "./components/item2.vue";
import item3 from "./components/item3.vue";
import item4 from "./components/item4.vue";
import {
  getCompanyList,
  getHotCompanyList,
  getJobList,
  getHotJobList,
} from "../../request/api";
import { mapState } from "vuex";
import { getWorkPeriodName, getEducationName } from "../../utils/frontDataDict";
let _jobList = [],
  _jobHotList = [],
  _companyList = [],
  _companyHotList = [];

export default {
  // 组件名称
  name: "hire",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, item1, item2, item3, item4 },
  // 组件状态值
  data() {
    return {
      companyHotList: [],
      jobHotList: [],
      companyList: [],
      jobList: [],
      loadingList: [true, true, true, true],
      boxList: [
        {
          title: "热门企业",
          type: false,
        },
        {
          title: "热门职位",
          type: true,
        },
        {
          title: "最新企业",
          type: false,
        },
        {
          title: "最新职位",
          type: true,
        },
      ],
    };
  },
  // 计算属性
  computed: {
    ...mapState(["userMobile"]),
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    toMore(flag) {
      this.$router.push({ name: flag ? "jobList" : "companyList" });
    },
    fetchJobData(list, fn) {
      //统一过滤职位类数据
      let newList = [],
        size = 6;
      list.forEach((vv, i) => {
        try {
          if (Array.isArray(JSON.parse(vv.education))) {
            vv.education &&
              (vv.education = getEducationName(vv.education, true));
          }
        } catch { }
        try {
          vv.workPeriod && (vv.workPeriod = getWorkPeriodName(vv.workPeriod));
        } catch { }
        try {
          if (Array.isArray(JSON.parse(vv.industry))) {
            vv.industry = JSON.parse(vv.industry)[1];
          }
          if (Array.isArray(JSON.parse(vv.city))) {
            vv.city = JSON.parse(vv.city)[1];
          }
        } catch { }
      });
      for (let i = 0; i < list.length; i += size) {
        newList.push(list.slice(i, i + size)); // 每${size}项分成⼀组
      }
      fn && fn();
      return newList;
    },
    fetchCompanyData(list, fn, size = 6) {
      //统一过滤企业类数据
      let newList = [];
      list.forEach((v) => {
        try {
          if (Array.isArray(JSON.parse(v.industry))) {
            v.industry = JSON.parse(v.industry)[1];
          }
          if (Array.isArray(JSON.parse(v.companyJobDOList))) {
            v.companyJobDOList = JSON.parse(v.companyJobDOList);
            v.companyJobDOList.forEach((vv) => {
              if (Array.isArray(JSON.parse(vv.city))) {
                vv.city = JSON.parse(vv.city)[1];
              }
            });
          }
        } catch { }
      });
      for (let i = 0; i < list.length; i += size) {
        newList.push(list.slice(i, i + size)); // 每${size}项分成⼀组
      }
      fn && fn();
      return newList;
    },
    setAllData() {
      // 热门企业
      this.companyHotList = this.fetchCompanyData(_companyHotList, () => {
        setTimeout(() => {
          this.loadingList[0] = false;
          this.$nextTick(function () {
            this.$refs.item1 && this.$refs.item1[0].initSwiper();
          });
        });
      });

      // 热门职位
      this.jobHotList = this.fetchJobData(_jobHotList, () => {
        this.loadingList[1] = false;
        this.$nextTick(function () {
          this.$refs.item2 && this.$refs.item2[0].initSwiper();
        });
      });

      // 最新企业
      this.companyList = this.fetchCompanyData(
        _companyList,
        () => {
          this.loadingList[2] = false;
          this.$nextTick(function () {
            this.$refs.item3 && this.$refs.item3[0].initSwiper();
          });
        },
        4
      );

      // 最新职位
      this.jobList = this.fetchJobData(_jobList, () => {
        this.loadingList[3] = false;
        this.$nextTick(function () {
          this.$refs.item4 && this.$refs.item4[0].initSwiper();
        });
      });
    },

    async init() {
      let parmas = {
        pageNo: 1,
        pageSize: 20,
      },
        parmasHot = {
          pageNo: 1,
          pageSize: 50,
        };
      await getJobList(parmas).then((res) => {
        if (res.data) {
          _jobList = res.data.list;
        }
      });
      await getHotJobList(parmasHot).then((res) => {
        if (res.data) {
          _jobHotList = res.data;
        }
      });
      let newCompanyParmas = {
        ...parmas,
        flag: 1,
      };
      await getCompanyList(newCompanyParmas).then((res) => {
        if (res.data) {
          _companyList = res.data.list;
        }
      });
      await getHotCompanyList(parmasHot).then((res) => {
        if (res.data) {
          _companyHotList = res.data;
        }
      });
      this.setAllData();
    },
    slidePrev(index) {
      this.$refs[`item${index + 1}`] &&
        this.$refs[`item${index + 1}`][0].slidePrev();
    },
    slideNext(index) {
      this.$refs[`item${index + 1}`] &&
        this.$refs[`item${index + 1}`][0].slideNext();
    },
  },
  created() { },
  mounted() {
    this.$nextTick(function () {
      this.init();
    });
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.recruitment {
  width: 100%;
  padding-top: 80px;
}

.bannerBox {
  width: 100%;
  position: relative;
  height: 150px;
  overflow-x: hidden;
  background: rgb(25, 56, 154);

  .t_img {
    display: none;
  }

  .pc_img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    min-width: 1920px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 150px;
  }
}

.boxs {
  width: 100%;
  padding: 40px calc((100% - 1300px) / 2) 145px;
  background: #fff;
  position: relative;

  .itemBox {
    width: 100%;
    padding: 0 20px;
    position: relative;

    .items {
      width: 1208px;
      margin: 0 auto;
    }

    .stepBox {
      width: 100%;
      position: absolute;
      left: calc((100% - 1300px) / 2);
      top: 50%;
      transform: translateY(-50%);

      .steps {
        width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        top: 0;

        img {
          width: 40px;
          height: 40px;
        }

        &.left {
          left: -27px;
        }

        &.right {
          right: -27px;
        }
      }
    }
  }

  .btns {
    width: 209px;
    height: 47px;
    position: absolute;
    bottom: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    transition-duration: 0.3s;
    background: #e1effe;
    border-radius: 10px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #15539a;
    cursor: pointer;

    &:hover {
      background: #4061bc;
      color: #ffffff;
    }
  }

  &.box_blue {
    background: rgb(237, 242, 249);
  }

  .boxMain {
    width: 1300px;

    .title {
      width: 100%;
      height: 30px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #000000;
      line-height: 30px;
      padding-left: 28px;
      margin-bottom: 33px;
      position: relative;

      &::after {
        content: "";
        width: 10px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 0;
        background: #15389a;
      }
    }
  }
}

@media screen and (max-width: 480px) {

  .recruitment {
    width: 100%;
    padding-top: 80px;
    height: 120px;
  }

  .bannerBox {
    height: 120px;
    font-size: 0;

    .pc_img {
      display: none;
    }

    .t_img {
      display: block;
      min-width: 375px;
      height: 120px
    }
  }

  .boxs {
    padding-top: 0;
    padding: 0 0 55px;

    .boxMain {
      width: 100%;
      padding: 15px 0;

      .title {
        height: 15px;
        font-size: 16px;
        margin-bottom: 0;
        line-height: 15px;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 4px;
          height: 17px;
          background: #4677B9;
        }
      }
    }

    .itemBox {
      padding: 0;

      .stepBox {
        display: none;
        ;
      }
    }

    .btns {
      position: absolute;
      bottom: 20px;
      width: 112px;
      height: 35px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #3D6CB0;
      line-height: 17px;
      background: #E1EFFE;
      border-radius: 6px;
    }
  }
}
</style>
